<template>
  <div class="com-full">
    <Card :imgType="1">
      <template #body>
        <div class="com-flex-r com-full com-center-c box">
          <!-- 左 -->
          <div class="lef">
            <LeftTopComponent :infoData="leftInfo" />
          </div>
          <!-- 右 -->
          <div class="rig">
            <LeftTopComponent
              :infoData="rightInfo"
              :CapacityTitle="CapacityTitle"
              :imgs="img"
            />
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from "@/components/Card/Card.vue";
import LeftTopComponent from "./component/LeftTopComponent.vue";
import { ref, onMounted, computed, watch, onUnmounted } from "vue";
import api from "@/api";
import bus from "@/utils/bus.js";
import { useParamsStore } from "@/stores/params.js";
import { getOpt } from "../../options/MockData";

const paramsStore = useParamsStore();
const param = computed(() => paramsStore.param);
const CapacityTitle = "U位容量";
const img = "/imgs/3.png";
const leftInfo = ref([]);
const rightInfo = ref([]);
const dataInit = async () => {
  if (isMockData) {
    const mockdata = await getOpt(param.value.ueId);
    let v5 = getRandon(mockdata.v5?.min, mockdata.v5?.max);
    let v6 = getRandon(mockdata.v6?.min, mockdata.v6?.max);
    let v7 = getRandon(mockdata.v7?.min, mockdata.v7?.max);
    let v8 = getRandon(mockdata.v8?.min, mockdata.v8?.max);
    const totalL = v6 + v5;
    const blL = Math.ceil((v5 / totalL) * 10000) / 100 + "%";
    leftInfo.value = [blL, totalL, v6, v5];
    const totalR = v8 + v7;
    const blR = Math.ceil((v7 / totalR) * 10000) / 100 + "%";
    rightInfo.value = [blR, totalR, v8, v7];
  } else {
    try {
      const { data } = await api.cabinet(param.value);
      leftInfo.value = [
        data.usageRateCabinet,
        data.cabinetTotal,
        data.availableCabinet,
        data.useCabinet,
      ];
      rightInfo.value = [data.cabinetRate, data.capacity, data.remaining, data.used];
    } catch (error) {
      console.log(error);
    }
  }
};

//取随机数
const getRandon = (min, max) => {
  if (min === max) {
    return max;
  }
  if (min === 0 && max === 0) {
    return 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
let isMockData = true;
onMounted(() => {
  bus.on("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
});
onUnmounted(() => {
  bus.off("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
});
watch(
  () => param.value,
  () => {
    dataInit();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.box {
  .lef {
    width: 50%;
    margin-left: 27px;
    margin-top: 20px;
  }

  .rig {
    width: 50%;
    margin-left: 27px;
    margin-top: 20px;
    // background-color: red;
  }
}
</style>
